<template>
  <el-dialog :visible.sync="dialogTableVisible" :append-to-body="true" :lock-scroll="false" :title="isEdit?'Edit':'Create'" @close="handleCloseDetailDialog">
    <el-form ref="postForm" :model="postForm" :rules="rules" label-position="left" label-width="100px" style="margin-left:50px;">
      <el-form-item :label="$t('menufiles.pid')" prop="pid" >
        <el-col :span="20">
          <el-cascader
            :options="menuList"
            :props="menuProps"
            :show-all-levels="false"
            :clearable="true"
            :change-on-select="true"
            v-model="selectedMenuOptions"
          />
        </el-col>
      </el-form-item>
      <el-form-item :label="$t('menufiles.permission_id')" prop="permission_id" >
        <el-col :span="20">
          <el-cascader
            :options="permissionList"
            :props="permissionProps"
            :show-all-levels="false"
            :clearable="true"
            :change-on-select="true"
            v-model="selectedPermissionOptions"
          />
        </el-col>
      </el-form-item>
      <el-form-item :label="$t('menufiles.name')" prop="name" >
        <el-col :span="20">
          <el-input v-model="postForm.name" :label="$t('menufiles.name')"/>
        </el-col>
      </el-form-item>

      <el-form-item :label="$t('menufiles.path')" prop="path" >
        <el-col :span="20">
          <el-input v-model="postForm.path" :label="$t('menufiles.path')"/>
        </el-col>
      </el-form-item>

      <el-form-item :label="$t('menufiles.component')" prop="component" >
        <el-col :span="20">
          <el-input v-model="postForm.component" :label="$t('menufiles.component')"/>
        </el-col>
      </el-form-item>

      <el-form-item :label="$t('menufiles.redirect')" prop="redirect" >
        <el-col :span="20">
          <el-input v-model="postForm.redirect" :label="$t('menufiles.redirect')"/>
        </el-col>
      </el-form-item>

      <el-form-item :label="$t('menufiles.title')" prop="title" >
        <el-col :span="20">
          <el-input v-model="postForm.title" :label="$t('menufiles.title')"/>
        </el-col>
      </el-form-item>

      <el-form-item :label="$t('menufiles.icon')" prop="icon" >
        <el-col :span="20">
          <el-input v-model="postForm.icon" :label="$t('menufiles.icon')"/>
        </el-col>
      </el-form-item>

      <el-form-item :label="$t('menufiles.descript')" prop="descript" >
        <el-col :span="20">
          <el-input v-model="postForm.descript" :label="$t('menufiles.descript')" type="textarea"/>
        </el-col>
      </el-form-item>

      <el-form-item :label="$t('menufiles.sort')" prop="sort" >
        <el-col :span="20">
          <el-input v-model="postForm.sort" :label="$t('menufiles.sort')" type="number"/>
        </el-col>
      </el-form-item>

      <el-form-item label="alwayshow" prop="alwayshow">
        <el-radio-group v-model="postForm.alwayshow">
          <el-radio :label="1">TRUE</el-radio>
          <el-radio :label="0">FALSE</el-radio>
        </el-radio-group>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCloseDetailDialog">{{ $t('table.cancel') }}</el-button>
      <el-button type="primary" @click="submitForm('postForm')">{{ $t('table.submit') }}</el-button>
    </div>

  </el-dialog>
</template>
<script>

import menuApi from '@/api/system/menu'
import ScrollPane from '../../../../../components/ScrollPane/index'

const defaultForm = {
  pid: 0,
  permission_id: '',
  enname: '',
  name: '',
  path: '',
  component: '',
  redirect: '',
  title: '',
  icon: '',
  descript: '',
  url: '',
  params: '',
  sort: '',
  alwayshow: 1
}

export default {
  name: 'Detail',
  components: { ScrollPane },
  data() {
    return {
      postForm: Object.assign({}, defaultForm),
      rules: {
        name: [
          { required: true, message: 'name is required', trigger: 'blur' }
        ],
        email: [
          { required: true, message: 'email is required', trigger: 'blur' }
        ],
        password: [
          { required: true, message: 'password is required', trigger: 'blur' }
        ]
      },
      isEdit: false,
      areaList: [],
      imageUrl: '',
      recordid: 0,
      dialogTableVisible: false,
      menuList: [],
      menuProps: {
        label: 'name',
        value: 'id',
        children: '_child'
      },
      selectedMenuOptions: [],
      permissionList: [],
      selectedPermissionOptions: [],
      permissionProps: {
        label: 'name',
        value: 'id',
        children: '_child'
      }
    }
  },
  computed: {
    lang() {
      return this.$store.getters.language
    }
  },
  created() {
  },

  mounted() {

  },

  methods: {
    showRecord(id) {
      menuApi.showRecord(id).then(response => {
        const serviceResponse = response.data
        if (serviceResponse.code === 0) {
          this.postForm = serviceResponse.data.record
          this.menuList = serviceResponse.data.menuList
          this.permissionList = serviceResponse.data.permissionList

          this.selectedMenuOptions = serviceResponse.data.selectMenu
          this.selectedPermissionOptions = serviceResponse.data.selectPermission
        }
      }).catch(err => {
        console.log(err)
      })
    },
    handleCreateRecord() {
      menuApi.createRecord().then(response => {
        const serviceResponse = response.data
        if (serviceResponse.code === 0) {
          this.menuList = serviceResponse.data.menuList
          this.permissionList = serviceResponse.data.permissionList
        }
      }).catch(err => {
        console.log(err)
      })
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const selectLength = this.selectedMenuOptions.length
          if (selectLength > 0) {
            this.postForm.pid = this.selectedMenuOptions[selectLength - 1]
          }

          const selectPermissionLength = this.selectedPermissionOptions.length
          if (selectPermissionLength > 0) {
            this.postForm.permission_id = this.selectedPermissionOptions[selectPermissionLength - 1]
          }

          if (this.editId > 0) {
            menuApi.updateRecord(this.editId, this.postForm).then(response => {
              const serviceResponse = response.data
              if (serviceResponse.code === 0) {
                this.$message({
                  type: 'success',
                  message: serviceResponse.msg
                })
                this.handleCloseDetailDialog()
              } else {
                this.$message({
                  type: 'error',
                  message: serviceResponse.msg
                })
              }
            })
          } else {
            menuApi.storeRecord(this.postForm).then(response => {
              const serviceResponse = response.data
              if (serviceResponse.code === 0) {
                this.$message({
                  type: 'success',
                  message: serviceResponse.msg
                })
                this.handleCloseDetailDialog()
              } else {
                this.$message({
                  type: 'error',
                  message: serviceResponse.msg
                })
              }
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(postForm) {
      this.$refs[postForm].resetFields()
    },

    handShowDetailDialog(id) {
      this.selectedMenuOptions = []
      this.menuList = []
      this.selectedPermissionOptions = []
      this.permissionList = []
      if (id > 0) {
        this.isEdit = true
        this.editId = id
        this.showRecord(id)
      } else {
        this.isEdit = false
        this.handleCreateRecord()
        this.postForm = Object.assign({}, defaultForm)
      }
      this.dialogTableVisible = true
    },
    handleCloseDetailDialog() {
      this.resetForm('postForm')
      this.editId = 0
      this.$emit('indexRecord')
      this.dialogTableVisible = false
    }

  }

}
</script>
